<template>
  <div class="user-add-or-update">
    <el-drawer :title="this.rowData ? '编辑菜单' : '新增菜单'" :visible.sync="drawer" custom-class="demo-drawer" direction="rtl" size="50%">
      <div class="demo-drawer__content">
        <div :style="cardHeightStyle" class="rightScrollNone">
          <el-form size="mini" :model="dataForm" :rules="rules" ref="vendorRuleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="菜单类型：" prop="level">
                  <el-radio-group v-model="dataForm.level" @change="levelChange">
                    <el-radio :label="1">目录</el-radio>
                    <el-radio :label="2">菜单</el-radio>
                    <el-radio :label="3">按钮</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="菜单名称：" prop="title">
                  <el-input autocomplete="off" type="text" v-model="dataForm.title" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24" v-if="dataForm.level == '2' || dataForm.level == '3'">
                <el-form-item label="上级菜单：" :label-width="formLabelWidth" prop="father_name">
                  <el-select v-model="dataForm.father_name" placeholder="请选择" ref="selectTree">
                    <el-option :key="dataForm.father_id" :value="dataForm.father_id" :label="dataForm.father_name" hidden />
                    <el-tree :data="roleOptions" :props="defaultProps" node-key="id" accordion highlight-current @node-click="handleNodeClick" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="路由名称：" prop="name">
                  <el-input autocomplete="off" type="text" v-model="dataForm.name" placeholder="请输入路由参数name"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="路由地址：" prop="path_p" v-if="dataForm.level == '1'">
                  <el-input autocomplete="off" type="text" v-model="dataForm.path_p" placeholder="请输入路由参数path_p"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="路径：" prop="path" v-if="dataForm.level == '1' || dataForm.level == '2'">
                  <el-input autocomplete="off" type="text" v-model="dataForm.path" placeholder="请输入路由参数path"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="图标：" prop="icon" v-if="dataForm.level == '1'">
                  <el-input placeholder="请选择图标" v-model="dataForm.icon">
                    <template slot="append"><i class="el-icon-setting" style="cursor: pointer" @click="dialogVisible = true"></i></template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="排序：" prop="sort">
                  <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" :max="99999999999"></el-input-number>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item :label-width="formLabelWidth" label="是否固定在导航：" prop="affix">
                  <el-switch v-model="dataForm.affix" active-text="是" inactive-text="否"> </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button size="mini" @click="cancelForm">取 消</el-button>
          <el-button size="mini" :loading="loading" @click="dataFormSubmit" type="primary">确定</el-button>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="菜单图标" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <div class="iconList">
        <i v-for="(lists, index) in iconList" :key="index" :class="lists.name" @click="chooseIcon(lists)"></i>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { addPermissionApi, editPermissionApi, roleMenusApi } from '@/api/system/index.js'
export default {
  data() {
    return {
      timeOutCount: 0,
      showNumInput: false,
      refNum: 0,
      dataForm: {
        id: '',
        level: 1, //菜单类型
        title: '', // 菜单名称
        name: '', //路由名称
        path_p: '', //菜单路径
        path: '',
        icon: '', //图标
        sort: '', //排序
        affix: false, //是否固定在导航
        father_id: '',
        father_name: '',
      },
      iconList: [
        { name: 'el-icon-s-home' },
        { name: 'el-icon-s-release' },
        { name: 'el-icon-s-claim' },
        { name: 'el-icon-folder-opened' },
        { name: 'el-icon-document-add' },
        { name: 'el-icon-reading' },
        { name: 'el-icon-attract' },
        { name: 'el-icon-s-custom' },
        { name: 'el-icon-data-analysis' },
        { name: 'el-icon-collection' },
        { name: 'el-icon-office-building' },
        { name: 'el-icon-shopping-bag-1' },
      ],
      rowData: null,
      formLabelWidth: '150px',
      loading: false,
      drawer: false,
      roleOptions: [],
      rules: {
        title: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '路由名称不能为空', trigger: 'blur' }],
        path_p: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路径不能为空', trigger: 'blur' }],
        icon: [{ required: true, message: '图标不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }],
        affix: [{ required: true, message: '请选择是否固定在导航', trigger: 'blur' }],
        father_name: [{ required: true, message: '请选择上级菜单', trigger: ['blur', 'change'] }],
      },
      organizationArr: [],
      dialogVisible: false,
      nowchecklist: [], // 已经选中的数组
      defaultProps: {
        children: 'children',
        label: 'title',
      },
    }
  },
  mounted() {
    this.getinitialrole()
  },
  computed: {
    cardHeightStyle() {
      let documentClientHeight = document.body.clientHeight
      const height = documentClientHeight - 80 - 80
      return {
        height: height + 'px',
        'overflow-y': 'scroll',
        'padding-right': '20px;',
      }
    },
  },
  methods: {
    getinitialrole() {
      // 获取初始化的权限
      roleMenusApi({})
        .then((res) => {
          this.roleOptions = res.data
        })
        .catch((e) => {})
    },
    // 上级菜单点击
    handleNodeClick(data) {
      this.dataForm.father_id = data.id
      this.dataForm.father_name = data.title
      // 使 input 失去焦点，并隐藏下拉框
      this.$refs.selectTree.blur()
    },
    reportAdd(params) {
      return addPermissionApi(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    reportUpdate(params) {
      return editPermissionApi(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('保存成功')
          }
        })
        .catch((res) => {
          this.$message.error('保存失败')
        })
    },
    dataFormSubmit() {
      this.$refs.vendorRuleForm.validate((flag) => {
        if (flag) {
          const data = this.dataForm
          console.log(data)
          var request = this.rowData ? this.reportUpdate(data) : this.reportAdd(data)
          request
            .then((d) => {
              this.cancelForm()
              this.$emit('refreshList')
            })
            .catch((d) => {
              this.cancelForm()
            })
        }
      })
    },
    cancelForm() {
      this.cleanInfo()
      this.loading = false
      this.drawer = false
    },
    open(row, role) {
      row ? (this.nowchecklist = row.power_code) : (this.nowchecklist = [])
      if (this.drawer) {
        return
      }
      this.rowData = row || null
      this.drawer = true
      this.openHook()
    },
    clearData() {
      this.$refs.vendorRuleForm.resetFields()
    },
    cleanInfo() {
      this.nowchecklist = []
      clearTimeout(this.timeOutCount)
    },
    openHook() {
      this.$nextTick((a) => {
        this.showNumInput = false
        this.refNum = 60 * 5 + 1
        this.clearData()
        if (this.rowData) {
          // 修改
          for (let key in this.dataForm) {
            this.dataForm[key] = this.rowData[key]
          }
        } else {
          this.loading = false
        }
      })
    },
    // 打开菜单图标
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    //选择菜单图标
    chooseIcon(item) {
      if (item) {
        this.dataForm.icon = item.name
        this.$message({
          message: '选中' + item.name,
          type: 'success',
        })
      }
      console.log(this.dataForm.icon)
    },
    // 切换菜单类型
    levelChange(data) {
      if (data == '1') {
        this.dataForm.father_id = ''
        this.dataForm.father_name = ''
      } else if (data == '2') {
        this.dataForm.path_p = ''
        this.dataForm.icon = ''
      } else if (data == '3') {
        this.dataForm.path_p = ''
        this.dataForm.path = ''
        this.dataForm.icon = ''
      }
    },
  },
}
</script>
<style lang="scss">
.user-add-or-update {
  .el-tag {
    position: relative;
    right: 5px;
    z-index: 1;
    height: 40px;
    line-height: 40px;
    border-radius: 0 5px 5px 0;
    padding-left: 15px;
  }

  .my-email {
    .el-input__inner {
      border-radius: 5px 0 0 5px;
    }
  }
}

/*

  */

.fileInput {
  padding-right: 0;
}
.iconList i {
  font-size: 20px;
  border: 1px solid #f1f1f1;
  padding: 6px;
  margin: 5px;
  cursor: pointer;
}
</style>
